<template>
	<div class="img-box">
		<div v-if="!props.src || isLoad" class="load-box">
			<loading-outlined />
			<div class="text">图片正在生成中...</div>
		</div>
		<div v-if="isError" class="error">图片已失效</div>
		<img v-else :src="props.src" @load="imgLoad" @error="imgError"/>
	</div>
</template>
<script setup>
	import { reactive, ref, onMounted } from 'vue'
	import { LoadingOutlined } from '@ant-design/icons-vue';
	const props = defineProps({
		src: {
			type: String,
			default: ''
		}
	})

	const isLoad = ref(true);
	const isError = ref(false);

	function imgLoad() {
		isLoad.value = false;
	}

	function imgError() {
		isLoad.value = false;
		isError.value = true;
	}

</script>
<style lang="less" scoped>
.img-box {
	position: relative;
	overflow: hidden;
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	.load-box {
		position: absolute;
		z-index: 2;
		top: 0;
		right:0;
		bottom: 0;
		left: 0;
		background: rgba(255,255,255,0.9);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 40px;
		gap: 20px;
		.text {
			font-size: 14px;
		}
	}
	img {
		display: block;
		width: 100%;
	}
	.error {
		font-size: 14px;
		color: #aaa;
	}
}	
</style>
